<template>
  <div class="establishId">
    <div class="max">
      <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label=" ">
          <a-input style="width:400px" v-model="form.name" placeholder="用户名/已验证手机" />
        </a-form-model-item>
        <a-form-model-item label=" ">
          <a-input style="width:400px" placeholder="短信验证码" type="number" v-model="smsCode" :max-length="6" />
          <div class="right-option">
            <div class="option-content" @click="sendSmsTab" v-if="countDown === 0">
              <span>获取短信验证码</span>
            </div>
            <div class="count-down" v-else>
              <span>{{countDown}}s</span>
            </div>
          </div>
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 14, offset: 5 }" class="phone1">
          <div class="phone">若无法获取验证码，请致电400-666-9690</div>
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
          <div class="clicks" @click="skip">下一步</div>
        </a-form-model-item>
      </a-form-model>
    </div>
  </div>
</template>
<script>
import '@/assets/css/form.less'
export default {
  data() {
    return {
      labelCol: { span: 5 },
      wrapperCol: { span: 11 },
      countDown: 0,
      form: {
        name: '',
        type: true
      },
      rules: {

      },
    }
  },
  methods: {
    // 发送手机验证码
    sendSmsTab() {
      if (!this.checkPhoneNum(this.userPhone)) {
        this.$message.error('请输入正确的手机号');
        return;
      }
      if (!this.verification) {
        this.$message.error('请先填写验证码');
        return;
      }
      let params = {
        code: this.verification,
        key: this.imgKey,
        mobile: this.userPhone
      }
      this.sendSmsCode(params);
      this.startCountDown(this.countDownTime);
    },
    // 发送短信验证码
    sendSmsCode(data) {
      this.$store.dispatch('request', this.$api.login.smsCode(data)).then(res => {
        if (res.success) {
          this.$message.success('手机验证码发送成功');
        }
      })
    },
    // 开始倒计时
    startCountDown(m) {
      this.countDown = m;
      if (m > 0) {
        let timer = setTimeout(() => {
          this.startCountDown(m - 1);
          clearTimeout(timer);
        }, 1000);
      }
    },
    // 验证手机号
    checkPhoneNum(value) {
      let myreg = /^1[3|4|5|6|7|8|9][0-9]{1}[0-9]{8}$/;
      return myreg.test(value);
    },
    //跳转设置新密码
    skip() {
      this.$router.push('/login/view/retrievePasswordTree');
    },
  },
}
</script>
<style lang="less" scoped>
.establishId {
  width: 100%;
  margin: 0 auto;
  .max {
    margin-top: 40px;
    .ant-form-item {
      padding-left: 240px;
      position: relative;
      margin-bottom: 22px;
      label {
        font-size: 12px;
        color: @colorGreyFont;
      }
      .hint {
        color: #ff9900;
        font-size: 12px;
        position: absolute;
        top: 14px;
      }
      .checkeds {
        margin-left: 200px;
      }
      .clicks {
        width: 400px;
        height: 40px;
        opacity: 1;
        background: @activeRed;
        border-radius: 2px;
        text-align: center;
        line-height: 40px;
        color: #fff;
        font-size: 14px;
        margin-left: 44px;
        margin: 0 0 30px 39px;
        cursor: pointer;
      }
    }
    .phone {
      font-size: 14px;
      color: @colorGreyFont;
    }
    /deep/ .ant-form-item-control {
      line-height: 20px;
    }
    .right-option {
      width: 110px;
      position: absolute;
      z-index: 10;
      right: 0;
      top: -12px;
      height: 40px;
      .option-content {
        font-size: 16px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        color: #3b82ff;
        opacity: 0.3;
        line-height: 40px;

        span {
          .userUnSelect();
          cursor: pointer;
          font-size: 14px;
        }
      }

      .count-down {
        font-size: 16px;
        font-weight: 400;
        text-align: center;
        padding-right: 16px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        color: @colorGreyFont;
        opacity: 0.3;
        line-height: 40px;
      }
    }
  }
}
.ant-input {
  height: 41px;
}
.ant-form-item-children {
  display: flex;
}
.max img {
  cursor: pointer;
  border: 1px solid @greyBorder;
}
</style>
